<template>
	<view>
		<view class="container">
			<view class="tab_box">
				<view class="tab_item" :class="{tab_on:current_status==1}" @tap="change_tab(1)">
					关注
					<view class="tab_line"></view>
				</view>
				<view class="tab_item " :class="{tab_on:current_status==2}" @tap="change_tab(2)">
					广场
					<view class="tab_line"></view>
				</view>
				<image src="/static/time_line/add_btn.png" @tap="go_release" class="add_btn" mode="widthFix"></image>
			</view>

			<view class="timeline_list">
				<timeline v-for="item,id in list" @go_detail="go_detail" :show_attention="true" :time_line_data_="item">
				</timeline>
				<view class="next_page">
					{{hasNextPage?'下滑查看更多':'没有更多了'}}
				</view>
			</view>

		</view>

		<tabbarqn :current="1"></tabbarqn>
	</view>
</template>
<style lang="scss">
	.next_page {
		padding-bottom: 30rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
	}

	.timeline_list {
		width: 100%;
		padding: 40rpx 0;
	}

	.tab_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 231rpx;
		position: relative;

		.tab_item {
			line-height: 45rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #999999;
		}

		.add_btn {
			position: absolute;
			right: 0;
			top: 10rpx;
			width: 30rpx;
			height: 30rpx;
		}

		.tab_on {
			line-height: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #FFE4B4;
		}

		.tab_line {
			width: 39rpx;
			height: 4rpx;
			background: #FFE4B4;
			border-radius: 5rpx;
			display: none;
			width: 30rpx;

			margin-left: 17rpx;
		}

		.tab_on .tab_line {
			display: block;
		}
	}
</style>
<script>
	import tabbarqn from '@/components/tabbarqn.vue'
	import {
		checkLogin
	} from '@/config/mixins.js'
	export default {
		components: {
			tabbarqn
		},
		mixins: [checkLogin],
		data() {
			return {
				page: 1,
				limit: 10,
				list: [],
				hasNextPage: true,
				current_status: 2,
			}
		},
		onShow() {
			this.get_data_list()
		},
		onPullDownRefresh() {
			this.get_data_list();
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		onReachBottom() {
			if (this.hasNextPage) {
				let new_page = this.page + 1;
				let data = {
					page: new_page,
					limit: this.limit,
					status: this.current_status
				}
				let token = (this.$db.get('userToken'));
				if (token) data.token = token
				this.$api.getTimelineList(data, res => {
					if (res.status) {
						this.list = this.list.concat(res.data);
						this.hasNextPage = res.data.length >= this.limit;
						this.page = new_page
					}
				})
			}
		},
		methods: {
			go_detail: function(id) {
				uni.navigateTo({
					url: '/pages/timeline/details?id=' + id
				})
			},

			go_release: function() {
				let token = (this.$db.get('userToken'));
				if (!token) {
					this.checkIsLogin();
					return
				}
				uni.navigateTo({
					url: '/pages/timeline/release'
				})
			},

			change_tab: function(tab) {
				if (this.current_status == tab) return;
				if (tab == 1) {
					let token = (this.$db.get('userToken'));
					if (token) {
						this.current_status = tab;
					} else {
						this.checkIsLogin();
						return
					}
				} else {
					this.current_status = tab;
				}
				this.get_data_list()
			},

			get_data_list: function() {
				this.hasNextPage = true;
				this.page = 1;
				this.list = [];
				let data = {
					page: this.page,
					limit: this.limit,
					status: this.current_status
				}
				let token = (this.$db.get('userToken'));
				if (token) data.token = token
				this.$api.getTimelineList(data, res => {
					if (res.status) {
						this.list = res.data;
						this.hasNextPage = res.data.length >= this.limit;
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		padding: 15rpx 45rpx;
		/* #ifdef APP */

		padding-top: var(--status-bar-height);
		/* #endif */
	}
</style>
